<template>
  <div class="input-wrapper">
    <label v-if="label" :for="id" class="input-label">
      {{ label }} <span v-if="required" class="input-required">*</span>
    </label>
    <div class="input-container" :class="{ 'input-prefix': $slots.prefix, 'input-suffix': $slots.suffix }">
      <div v-if="$slots.prefix" class="input-addon">
        <slot name="prefix" />
      </div>
      <input
        :id="id"
        :type="type"
        :value="modelValue"
        :placeholder="placeholder"
        :disabled="disabled"
        :readonly="readonly"
        :required="required"
        :class="[
          'input', 
          size ? `input-${size}` : '',
          { 'input-error': error },
          { 'input-success': success },
          className
        ]"
        @input="$emit('update:modelValue', $event.target.value)"
        @focus="$emit('focus', $event)"
        @blur="$emit('blur', $event)"
      />
      <div v-if="$slots.suffix" class="input-addon">
        <slot name="suffix" />
      </div>
    </div>
    <div v-if="error" class="input-message input-message-error">
      {{ error }}
    </div>
    <div v-else-if="hint" class="input-message">
      {{ hint }}
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  name: 'Input',
  props: {
    id: {
      type: String,
      default() {
        return `input-${Math.random().toString(36).substr(2, 9)}`;
      }
    },
    modelValue: {
      type: [String, Number],
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'text'
    },
    size: {
      type: String,
      default: '',
      validator: (value) => ['', 'sm', 'lg'].includes(value)
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    error: {
      type: String,
      default: ''
    },
    hint: {
      type: String,
      default: ''
    },
    success: {
      type: Boolean,
      default: false
    },
    className: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue', 'focus', 'blur'],
}
</script>

<style>
.input-wrapper {
  margin-bottom: var(--spacing-4);
}

.input-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  margin-bottom: var(--spacing-2);
  color: var(--color-gray-700);
}

.input-required {
  color: var(--color-error);
  margin-left: var(--spacing-1);
}

.input-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input {
  width: 100%;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-base);
  transition: all var(--transition-fast) var(--transition-timing);
  background-color: var(--color-background);
  color: var(--color-gray-900);
}

.input-sm {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
}

.input-lg {
  padding: var(--spacing-4) var(--spacing-6);
  font-size: var(--font-size-lg);
}

.input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  outline: none;
}

.input:disabled,
.input:read-only {
  background-color: var(--color-gray-100);
  cursor: not-allowed;
  opacity: 0.7;
}

.input-error {
  border-color: var(--color-error);
}

.input-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.input-success {
  border-color: var(--color-success);
}

.input-success:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.input-message {
  margin-top: var(--spacing-1);
  font-size: var(--font-size-xs);
  color: var(--color-gray-500);
}

.input-message-error {
  color: var(--color-error);
}

.input-prefix .input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input-suffix .input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-addon {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-3);
  background-color: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-500);
  font-size: var(--font-size-sm);
}

.input-prefix .input-addon:first-child {
  border-right: none;
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}

.input-suffix .input-addon:last-child {
  border-left: none;
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

@media (prefers-color-scheme: dark) {
  .input-label {
    color: var(--color-gray-300);
  }
  
  .input {
    background-color: var(--color-gray-800);
    border-color: var(--color-gray-600);
    color: var(--color-gray-100);
  }
  
  .input:disabled,
  .input:read-only {
    background-color: var(--color-gray-700);
  }
  
  .input-addon {
    background-color: var(--color-gray-700);
    border-color: var(--color-gray-600);
    color: var(--color-gray-300);
  }
}
</style> 